<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '../store/auth'
import { User, Setting, List, OfficeBuilding, Briefcase, CollectionTag, DataAnalysis, Box, Document, Calendar, House } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const auth = useAuthStore()

const logout = () => {
  auth.logout()
  router.push('/login')
}

const titleMap = {
  '/admin/home': '首页',
  '/admin/users': '用户管理',
  '/admin/doctors': '医生管理',
  '/admin/admins': '管理员管理',
  '/admin/departments': '科室管理',
  '/admin/positions': '职称管理',
  '/admin/indicator-categories': '指标类别',
  '/admin/indicators': '检查指标',
  '/admin/packages': '体检套餐',
  '/admin/orders': '体检订单',
  '/admin/schedules': '医生排班',
  '/admin/profile': '个人信息'
}
const currentTitle = computed(() => titleMap[route.path] || '管理页')
</script>

<template>
  <div class="layout">
    <header class="header">
      <div class="title">校医体检管理系统 - 管理端</div>
      <div class="actions">
        <el-button type="primary" text @click="router.push('/admin/home')">首页</el-button>
        <el-dropdown>
          <span class="el-dropdown-link">{{ auth.user?.name || '管理员' }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/admin/profile')">个人信息</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    <div class="body">
      <aside class="sider">
        <el-menu :default-active="route.path" router>
          <el-menu-item index="/admin/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/admin/users">
            <el-icon><List /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/doctors">
            <el-icon><Briefcase /></el-icon>
            <span>医生管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/admins">
            <el-icon><Setting /></el-icon>
            <span>管理员管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/departments">
            <el-icon><OfficeBuilding /></el-icon>
            <span>科室管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/positions">
            <el-icon><Briefcase /></el-icon>
            <span>职称管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/indicator-categories">
            <el-icon><CollectionTag /></el-icon>
            <span>指标类别</span>
          </el-menu-item>
          <el-menu-item index="/admin/indicators">
            <el-icon><DataAnalysis /></el-icon>
            <span>检查指标</span>
          </el-menu-item>
          <el-menu-item index="/admin/packages">
            <el-icon><Box /></el-icon>
            <span>体检套餐</span>
          </el-menu-item>
          <el-menu-item index="/admin/orders">
            <el-icon><Document /></el-icon>
            <span>体检订单</span>
          </el-menu-item>
          <el-menu-item index="/admin/schedules">
            <el-icon><Calendar /></el-icon>
            <span>医生排班</span>
          </el-menu-item>
          <el-menu-item index="/admin/profile">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
          </el-menu-item>
        </el-menu>
      </aside>
      <main class="content">
        <div class="page-bar">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="page-title">{{ currentTitle }}</div>
        </div>
        <router-view />
      </main>
    </div>
  </div>
</template>

<style scoped>
.layout { display: flex; flex-direction: column; height: 100vh; }
.header { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 56px; border-bottom: 1px solid #eee; background-color: #fff; }
.title { font-weight: 600; }
.body { display: flex; flex: 1; }
.sider { width: 240px; border-right: 1px solid #eee; background-color: #fff; }
.content { flex: 1; padding: 16px; overflow: auto; background-color: var(--bg-muted); }
</style>